<template>
    <div>
      <el-form
        :model="queryParams"
        ref="queryRef"
        label-position="right"
        label-width="150px"
      >
        <h4 class="title_2 mb10">项目查询</h4>
        <el-row> 
          <el-col :span="8">
            <el-form-item label="所属机构" prop="createOrg">
              <el-select
                v-model="queryParams.createOrg"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in branchIdOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目号" prop="projectCode">
              <el-input
                v-model="queryParams.projectCode"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="queryParams.projectName"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="custName">
              <el-input
                v-model="queryParams.custName"
                placeholder="请输入"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目类型" prop="projectType2">
              <el-select
                v-model="queryParams.projectType2"
                placeholder="请选择"
                clearable
                style="width: 300px"
              >
                <el-option
                  v-for="dict in projectType2Options"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投标日期" prop="bidDate">
              <el-date-picker
                v-model="queryParams.bidDate"
                type="date"
                placeholder="请选择"
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
        </el-row>
      </el-form>
  
      <span class="title_2 mb10">项目列表</span>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="项目号" align="center" prop="projectCode" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="项目名称" align="center" prop="projectName" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="客户名称" align="center" prop="custName" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="项目所属机构" align="center" prop="createOrg" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="项目类型" align="center" prop="projectType2" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column label="投标日期" align="center" prop="bidDate" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="本年度保费规模（万元）" align="center" prop="clientPremiumScope" min-width="140" :show-overflow-tooltip="true" />
        <el-table-column label="预计总保费（万元）" align="center" prop="yjzbf" min-width="100" :show-overflow-tooltip="true" />
        <el-table-column label="目标保费（万元）" align="center" prop="mbbf" min-width="130" :show-overflow-tooltip="true" />
        <el-table-column label="目标份额（%）" align="center" prop="mbfe" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="预计分出金额" align="center" prop="yjfcje" min-width="140" :show-overflow-tooltip="true" />
        <el-table-column label="预计分出比例" align="center" prop="yjfcbl" min-width="140" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" align="center" prop="createTime" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="项目创建人" align="center" prop="createPerson" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="操作" fixed="right" align="center" width="200" class-name="small-padding fixed-width">
          <template #default="{row}">
            <router-link class="link-type" :to="{path: '/project/details'}">
              <el-button link type="primary">详情</el-button>
            </router-link>
            <router-link class="link-type" :to="{path: '/project/edit'}">
              <el-button link type="primary">编辑</el-button>
            </router-link>
            <router-link class="link-type" :to="{path: '/project/follow'}">
              <el-button link type="primary">跟进</el-button>
            </router-link>
            <router-link class="link-type" :to="{path: '/project/approval'}">
              <el-button link type="primary">审批</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 10"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
    
  <script setup name="MyFollowing">
  const router = useRouter();
  
  const branchIdOptions = ref([
    { label: "总公司", value: 1 },
    { label: "武汉分公司", value: 2 },
    { label: "上海分公司", value: 3 },
  ]);
  const projectType2Options = ref([
    { label: "车险项目", value: 1 },
    { label: "产险项目", value: 2 },
  ]);
  const certTypeOptions = ref([
    { label: "统一社会信用代码", value: 1 },
    { label: "组织机构代码", value: 2 },
  ]);
  
  const toPage = (type) => {
    router.push({ path: "/project/"+type });
  };
  
  // 列表查询逻辑-start
  const loading = ref(false);
  const tableList = ref([]);
  const total = ref(0);
  const queryRef = ref(null);
  const queryParams = reactive({
    custName: "",
    certType: "",
    certNo: "",
    pageNo: 1,
    pageSize: 10,
  });
  const getList = () => {
    loading.value = true;
    setTimeout(() => {
      tableList.value = [
        {
          id: 1,
          projectCode: "P723462843247238",
          projectName: "测试项目1",
          custName: "武汉建筑工程有限公司",
          createOrg: "武汉分公司",
          projectType2: "车险项目",
          clientPremiumScope: 10000,
          yjzbf: 10000,
          mbbf: 10000,
          mbfe: "10",
          yjfcje: 10000,
          yjfcbl: "10",
          createTime: "2024-02-19",
          createPerson: "张某钧",
          bidDate: "2024-02-27"
        },
      ];
      total.value = Number(tableList.value.length);
      loading.value = false;
    }, 300);
  };
  const resetQuery = (formEl) => {
    queryRef.value.resetFields();
    getList();
  };
  getList();
  // 列表查询逻辑-end
  </script>
    
  <style lang="scss" scoped>
  </style>
    